<template>
	<div class="blood">
      <div class="search-item">
		<el-row type="flex" align="center" class="metaData" justify="space-between">
         <el-col :span="24">
            <el-button-group>
               <el-button label="basis" :class="['btn-notAction',tabPosition=='basis'?'btn-action':'']" @click="handleClick('basis')">表单血缘</el-button>
               <el-button label="associat" :class="['btn-notAction',tabPosition=='associat'?'btn-action':'']" @click="handleClick('associat')">字段血缘</el-button>
            </el-button-group>
			</el-col>
		</el-row>
      <el-row class="blood-search">
         <div class="float-left blood-search-item">
            <span>血缘层级：</span>
            <el-select v-model="queryParams.level">
               <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled">
               </el-option>
            </el-select>
         </div>
          <div class="float-left blood-search-item"  v-show="tabPosition == 'associat'">
            <span>字段名称：</span>
            <el-select v-model="fieldName">
               <el-option
                  v-for="item in fieldsList"
                  :key="item.fieldName"
                  :label="item.fieldName"
                  :value="item.fieldName"
                 >
               </el-option>
            </el-select>
         </div>
         <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
               @click="handleEdit"
               >查询</el-button>
		</el-row>
      </div>
      <!--基础信息--->
      <template id="basis" >
         <TreeItem :mapHeight=mapHeight :treeData='LineageList'></TreeItem>
      </template>
       <!--关联信息--->
	</div>
</template>
<script>
import TreeItem from "../../TreeItem/bloodMap";
import {LineageList,getFieldsList} from "@/api/dataManagement/system/info";
import {getHeight} from "@/utils/zkComm";
export default {
   name: "blood",
   props:{
      isEdit:{
         type:Boolean
      }
   },
   components:{TreeItem},
   data(){
         return {
            // 遮罩层
            loading: false,
            region:'',
            mapHeight:undefined,
            // 用户表格数据
            tabPosition:"basis",
            isEditAdd:false,
            options: [{
               value: 1,
               label: '第一层',
            }, {
               value: 2,
               label: '第二层',
            },{
               value: 3,
               label: '第三层',
            }],
            queryParams: {
               level:1
            },
            tableId:'',
            fieldName:'',
            LineageList:[],
            fieldsList:[]
         }
   },
   created(){
      this.tableId = this.$route.params.tableId
      this.getList();
      this.FieldsList()
   },
   mounted(){
      this.mapHeight = getHeight(false)-90
   },
   methods: {
      getList(){
         LineageList({tableId:this.tableId,data:this.queryParams}).then(res=>{
            this.LineageList = res.data
         })
      },
      FieldsList(){
         getFieldsList({params:{tableId:this.tableId}}).then(res=>{
            this.fieldsList =  res.data;
         })
      },
      handleRowClick(){

      },
      handleSelectionChange(){

      },
      handleEdit(){
         if(this.tabPosition=='associat') {
            this.queryParams.fieldName = this.fieldName;
         } else {
            this.fieldName = ''
         }
         this.getList()
      },
      handleChange(){},
      updataHandle(){
         this.queryParams.level = 1
         this.fieldName =  ''
         this.getList();
         this.FieldsList()
      },
      // 内页tabs 且换
      handleClick(label ){
          this.tabPosition  = label
          this.level= '第一层'
      },
      isEdidAddHandle(){
         this.isEditAdd =  true
      }
   },
}
</script>

<style lang="scss" scoped>
 .btn-notAction{
    border-radius: 0px!important;
 }
 .btn-action{
   background:#1183F8;
   color:#ffffff;
 }
 .search-item{
   padding-top:20px;
 }
 .blood-search{
    padding:20px 0;
 }
 .blood-search-item{padding-right:20px;}
</style>